<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户标签</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>

            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">用户标签</h3>

          <el-form :inline="true"  class="demo-form-inline" style="text-align: left">
            <el-form-item label="标签名称">
              <el-input v-model="labername" placeholder="请输入标签名称"></el-input>
            </el-form-item>
            <el-form-item label="标签类型">
              <el-select v-model="labertype" placeholder="请选择标签类型">
                <el-option label="请选择标签类型" value=""></el-option>
                <el-option label="自动标签" value="自动标签"></el-option>
                <el-option label="手动标签" value="手动标签"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchLabel">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      <el-card style="margin-top: 30px">
         <div style="float: left"><span>标签列表</span></div>
        <div style="float: right">
          <el-button type="primary" @click="readyAdd" size="mini">+新建</el-button>
          <el-button type="primary" @click="goCondition" size="mini">编辑标签条件</el-button>
        </div>
      </el-card>
      <el-card>

            <el-table :data="laberList" border stripe>
                <el-table-column type="index"></el-table-column>
              <el-table-column label="标签名称" prop="labername"></el-table-column>
              <el-table-column label="用户数量" prop="usernum"></el-table-column>
              <el-table-column label="标签类型" prop="labertype"></el-table-column>
              <el-table-column label="标签条件" >
                <template slot-scope="sc">
                  <el-button type="text" size="mini" @click="showCondition(sc.row)">查看</el-button>
                  <el-button type="text" size="mini" @click="editCondition(sc.row)">编辑</el-button>
                </template>
              </el-table-column>
              <el-table-column label="标签状态">
                <template slot-scope="sc">{{sc.row.status==1?'启用':'禁用'}}</template>
              </el-table-column>
              <el-table-column label="最后修改时间" prop="updatetime"></el-table-column>

                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="readyEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="removeById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>


      <!-- 添加表单 -->
      <el-dialog title="添加标签" :visible.sync="addFormVisible" width="50%" :close-on-click-modal="false" @close="addFormClose">
        <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="标签名称" prop="labername">
            <el-input v-model="addForm.labername"></el-input>
          </el-form-item>
          <el-form-item label="标签类型"  prop="labertype">
            <el-radio v-model="addForm.labertype" :label="1">自动标签</el-radio>
            <el-radio v-model="addForm.labertype" :label="2">手动标签</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doAdd">确 定</el-button>
                <el-button @click="addFormClose">取 消</el-button>
            </span>
      </el-dialog>

      <!--修改表单-->
      <el-dialog title="修改标签" :visible.sync="editFromVisible" width="50%" :close-on-click-modal="false" @close="editFormClose">
        <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="标签名称" prop="labername">
            <el-input v-model="editForm.labername"></el-input>
          </el-form-item>
          <el-form-item label="标签类型"  prop="status">
            <el-radio v-model="editForm.status" :label="1">启用</el-radio>
            <el-radio v-model="editForm.status" :label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doEdit">确 定</el-button>
                <el-button @click="editFormClose">取 消</el-button>
            </span>
      </el-dialog>


      <!--标签条件-->
      <el-dialog title="标签条件" :visible.sync="showConditionVisible"  width="30%" :close-on-click-modal="false" @close="conditionFormClose">
        <p style="font-size: 16px;border-bottom: 1px solid gainsboro;text-align: left">标签信息</p>
        <p style="text-align: left">标签名称：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span v-text="lname"></span></p>
        <p style="text-align: left">标签类型：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span v-text="ltype"></span></p>
        <p style="font-size: 16px;border-bottom: 1px solid gainsboro;text-align: left">条件设置</p>
        <p style="text-align: left" v-for="n of labelConditionList" >{{n.conditionname}}：&nbsp;&nbsp;&nbsp;&nbsp;{{n.type}}</p>
        <span slot="footer" class="dialog-footer">
                <el-button @click="conditionFormClose">关 闭</el-button>
            </span>
      </el-dialog>

      <el-dialog title="添加标签条件" :visible.sync="editConditionVisible"  width="30%" :close-on-click-modal="false" @close="editConditionFormClose">
        <p style="font-size: 16px;border-bottom: 1px solid gainsboro;text-align: left">标签信息</p>
        <p style="text-align: left">标签名称：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span v-text="lname"></span></p>
        <p style="text-align: left">标签类型：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span v-text="ltype"></span></p>
        <p style="font-size: 16px;border-bottom: 1px solid gainsboro;text-align: left">条件设置</p>
        <el-table
            ref="multipleTable"
            :data="conditionList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="id"
              width="55">
          </el-table-column>
          <el-table-column
              prop="conditionname"
              label="条件名称"
              width="120">
          </el-table-column>
          <el-table-column
              prop="type"
              label="条件限制"
              show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
                <el-button @click="doEditCondition">确 定</el-button>
                <el-button @click="editConditionFormClose">关 闭</el-button>
            </span>
      </el-dialog>


    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 5,
                total:0,
                laberList: [],
                labelConditionList:[],//标签设置的条件
                conditionList:[],//所有的标签条件
                multipleSelection:[],//选中的条件id
                labername:"",
                labertype:"",
              addFormVisible: false,
              editFromVisible:false,
              showConditionVisible:false,
              editConditionVisible:false,
              addForm: {
                labername: "",
                labertype: ""
              },
              editForm:{
                id:"",
                labername: "",
                status:"",
              },
              addRules: {
                   /*  userCode: [
                       { required: true, message: "請輸入工号", trigger: "blur" },
                       { min: 4, max: 4, message: "工号必须是4个字符", trigger: "blur" }
                     ]*/
                },
              editRules:{

              },
              lid:"",
              lname:"",
              ltype:"",
              editConditionFrom:{
                  id:"",
                conditionIds: []

              }

            };
        },
        methods: {
          goCondition(){
            this.$router.push("/Condition");

          },
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
          doEditCondition(){
            let conditions=[]
            for (let i=0;i<this.multipleSelection.length;i++){
              conditions.push(this.multipleSelection[i].id)
            }
            this.editConditionFrom.id=this.lid;
            this.editConditionFrom.conditionIds=conditions;

           let url = "label/updateLabelCondition";
            this.$axios.put(url,this.editConditionFrom).then(res=>{
              if (res.data.code == 200){
                this.$message({
                  type:"success",
                  message:res.data.msg,
                  duration:1000
                })
                this.editConditionVisible=false;
                this.labelConditionList=[];
                this.searchLabel();
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });


          },
          editConditionFormClose(){
            this.editConditionVisible=false;
            this.labelConditionList=[];
          },
          editCondition(row){
            this.editConditionVisible=true;
            this.lid=row.id;
            this.lname=row.labername;
            this.ltype=row.labertype;
            //查询所有标签设置条件
            let url = "condition/queryAllCondition";
            this.$axios.get(url).then(res=>{
              if (res.data.code == 200){
                this.conditionList = res.data.data;

              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
            //查询该标签设置的条件
            let id=row.id;
            let durl = "label/queryConditionByLabel";
            this.$axios.get(durl,{
              params:{
                id:id,
              }
            }).then(res=>{
              if (res.data.code == 200){
                this.labelConditionList = res.data.data;
                this.conditionList.forEach((grt)=>{
                  this.labelConditionList.forEach((con) =>{
                    if(grt.id==con.id){
                      this.$refs.multipleTable.toggleRowSelection(grt,true);
                    }
                  })
                })
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },
          conditionFormClose(){
            this.showConditionVisible=false;
            this.labelConditionList=[];
          },
          showCondition(row){
           this.showConditionVisible=true;
           this.lname=row.labername;
           this.ltype=row.labertype;
            //查询该标签设置的条件
            let id=row.id;
            let url = "label/queryConditionByLabel";
            this.$axios.get(url,{
              params:{
                id:id,
              }
            }).then(res=>{
              if (res.data.code == 200){
                this.labelConditionList = res.data.data;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });

          },
          doEdit(){
            this.$refs.editForm.validate(valid=>{
              if (!valid){
                return ;
              }
              let url = "label/updateLabel";
              this.$axios.put(url,this.editForm).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type:"success",
                    message:res.data.msg,
                    duration:1000
                  })
                  this.editFromVisible = false ;
                  this.$refs.editForm.resetFields();
                  this.searchLabel();
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            })

          },
          readyEdit(row){
            this.editFromVisible=true;
            this.editForm=row;
          },
          editFormClose(){
            this.editFromVisible=false;
            this.$refs.editForm.resetFields();
          },
          removeById(id) {
              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                let url = "label/del/"+id ;
                this.$axios.delete(url)
                    .then(res=>{
                      if (res.data.code == 200){
                        this.$message({
                          type:"success",
                          message:res.data.msg,
                          duration:1000
                        })
                        this.searchLabel();
                      }else {
                        this.$message({
                          type:"error",
                          message:res.data.msg,
                          duration:1000
                        })
                      }
                    })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });
            },
          doAdd(){
            this.$refs.addForm.validate(valid=>{
              if (!valid){
                return ;
              }
              let url = "label/add";
              this.$axios.post(url,this.addForm).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type:"success",
                    message:res.data.msg,
                    duration:1000
                  })
                  this.addFormVisible = false ;
                  this.$refs.addForm.resetFields();
                  this.searchLabel();
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            })
          },

          readyAdd(){
            this.addFormVisible=true;
          },
          addFormClose() {
                this.$refs.addForm.resetFields();
                this.addFormVisible=false;
            },
            getLaberList() {
              let url = "label/queryAllLabel";
              this.$axios.get(url,{
                params:{
                  name:this.labername,
                  type:this.labertype,
                  now:this.pageNum,
                  size:this.pageSize
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.laberList = res.data.data.list;
                  this.pageNum = res.data.data.pageNum;
                  this.pageSize = res.data.data.pageSize;
                  this.total = res.data.data.total;
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
              this.getLaberList()
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
              this.getLaberList()
            },
          searchLabel(){
            this.pageNum = 1;
            this.getLaberList()
          },
            reloadData() {
                this.searchLabel();
                this.getLaberList()
            }
        },
        created() {
            this.reloadData();

        }
    };
</script>
<style lang="less" scoped>
</style>